<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹性盒（伸缩盒）：</title>
    <style>
/*1、概述：CSS中另一种布局手段，主要用来代替浮动完成页面的布局
2、flex可以使元素具有弹性，让元素跟随页面大小的改变而改变*/
        *{
            margin:0;
            padding:0;
            list-style: none;
        }
        ul{
            width:500px;
            border:10px yellow solid; 
            /*将ul设置为弹性容器*/
/*3、弹性容器：
（1）作用：使用弹性盒，必须将一个元素设置为弹性容器
（2）设置：display
（3）可选值：flex块级弹性容器、inline-flex行内弹性容器*/
            display: flex;
            /*指定容器中弹性元素的排列方式*/
/*4、弹性元素
（1）概念：弹性容器的子元素（弹性项）；一个元素既可以是弹性容器，也可以是弹性元素
（2）设置排列方式： flex-direction属性
（3）可选值（属性值）：
row默认值，弹性元素在容器中水平排列（自左向右）-主轴自左向右
row-reverse弹性元素在容器中反向水平排列（自右向左）-主轴自右向左
column弹性元素在容器中纵向排列（自上向下）-主轴自上向下
column-reverse 弹性元素在容器中反向纵向排列（自下向上）-主轴自下向上
5、主轴：弹性元素的排列方向
6、侧轴：与主轴垂直方向*/
            /* flex-direction: column;
            flex-direction: column-reverse; */
            flex-direction: row;
        }
        li{
            width:100px;
            height:100px;
            background-color: aqua;
            font-size:50px;
            text-align:center;
            line-height: 100px;
/*7、弹性元素的属性
（1）flex-grow指定弹性元素的伸展系数；当父元素有多余空间时，子元素如何伸展；父元素剩余空间，会按照比例分配*/
            flex-grow: initial;
/*（2）flex-shrink指定弹性元素的收缩系数；当父元素的空间不足以容纳所有的子元素时，如何对子元素进行收缩*/
        }
        li:nth-child(2){
            background-color: chartreuse;
            flex-grow: 0;
            flex-shrink: 0;
        }
        li:nth-child(3){
            background-color: darkorange;
            flex-grow: 3;
            flex-shrink: initial;
        }

    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
</html>